<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Bootstrap 3.3.6 -->


    <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">


    <script src="static/plugins/jQuery/jquery-2.2.3.min.js"></script>

    <!-- Bootstrap 3.3.6 -->
    <script src="static/bootstrap/js/bootstrap.min.js"></script>


    <link rel="stylesheet" href="static/plugins/datatables/dataTables.bootstrap.css">

</head>

<body>

<div class="">
    <div class="row ">
        <div class="col-md-12">

            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">基本信息</h3>
                </div>
                <div class="panel-body">
                    <span class="label label-success">项目：{{ resp.project_name }}</span>
                    <span class="label label-success">发布者：{{ resp.publisher }}</span>
                    <span class="label label-success">docker镜像：{{ resp.fulltag }}</span>
                </div>
            </div>


            <div class="panel panel-primary">
                <div class="panel-heading">
                    漏洞趋势
                </div>
                <div class="panel-body">
                    <div id="vuln_trend" style="height: 323px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row ">
        <div class="col-md-6">

            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">影响组件统计</h3>
                </div>
                <div class="panel-body">
                    <div id="package_pie" style="height: 323px; width: 627px;"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">

            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">危害级别统计</h3>
                </div>
                <div class="panel-body">
                    <div id="risk_pie" style="height: 323px; width: 627px;"></div>
                </div>
            </div>
        </div>
    </div>


    <div class="row ">
        <div class="col-md-12">

            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">漏洞信息</h3>
                </div>
                <div class="panel-body">
                    <div class="box">
                        <!-- /.box-header -->

                        <div class="box-body">
                            <table class="table  table-hover"
                                   style="border-left:3px solid green;border-bottom:1px solid green" id="details_table">
                                <thead>
                                <tr>
                                    <th>漏洞编号</th>
                                    <th>漏洞包名</th>
                                    <th>当前版本</th>
                                    <th>包类型</th>
                                    <th>等级</th>
                                    <th>父级依赖包</th>
                                    <th>升级至最新版本</th>
                                    <th>升级至同版本</th>
{#                                    <th>POC数目</th>#}
                                </tr>
                                </thead>
                                <tbody>


                                {% for vul in resp.vulnerabilities %}
                                    <tr>
                                        <td><b><a href="{{ vul.url }}" target="_Blank">{{ vul.vuln }}</a></b></td>
                                        {% if  vul.package_type == 'java' %}
                                            <td>{{ vul.package_name }}</td>
                                        {% else %}
                                            <td>{{ vul.package_name }}</td>
                                        {% endif %}

                                        <td>{{ vul.package_version }}</td>
                                        <td>{{ vul.package_type }}</td>
                                        <td>{{ vul.severity }}</td>
                                        <td>{{ vul.parents }}</td>
                                        <td>{{ vul.fix }}</td>
                                        <td>{{ vul.second_fix_version }}</td>
                                        <td>{{ vul.poc_count }}</td>


                                    </tr>
                                {% endfor %}


                                </tbody>
                            </table>
                        </div>


                        <!-- /.box-body -->
                    </div>
                </div>
            </div>


        </div>
    </div>


    <div class="row">
        <div class="col-md-12">


            <!-- /.box -->


        </div>
    </div>


</div>


</body>


<script src="static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="static/plugins/echarts/echarts.min.js"></script>


<script type="text/javascript">


    $(document).ready(function () {
        $('#details_table').DataTable({
            "searching": false,
            'order': [1, 'desc']
        });
    });

    var risk_pie = echarts.init($("#risk_pie")[0]);
    var option = {

        tooltip: {
            trigger: 'item',
            formatter: "总数 : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left'
        },
        series: [
            {
                type: 'pie',
                data: {{ total_risk |safe }}
            }
        ]
    };
    risk_pie.setOption(option);

    var package_pie = echarts.init($("#package_pie")[0]);
    var option = {

        tooltip: {
            trigger: 'item',
            formatter: "总数 : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left'
        },
        series: [
            {
                center: ['60%', '50%'],
                type: 'pie',
                data: {{ total_package |safe }}
            }
        ]
    };
    package_pie.setOption(option);

    var vuln_trend = echarts.init($("#vuln_trend")[0]);
    var option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['严重', '高', '中', '低']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: {{ vuln_trend.created_at |unicode2str|safe }}
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '严重',
                type: 'line',
                areaStyle: {},
                data: {{ vuln_trend.critical }}
            },
            {
                name: '高',
                type: 'line',
                areaStyle: {},
                data: {{ vuln_trend.high }}
            },
            {
                name: '中',
                type: 'line',
                areaStyle: {},
                data: {{ vuln_trend.medium }}
            },
            {
                name: '低',
                type: 'line',
                areaStyle: {},
                data: {{ vuln_trend.low }}
            },
        ]
    };
    vuln_trend.setOption(option);
</script>
